<template>
	<view class="">
		<view class="main-wrap" :class="{show:loaded}">
			<view class="back-top" :style="{ opacity }" @tap="userClickTopIcon">
				<view class="" :style="{ height }"></view>
				<view class="back-icon-con row ">
					<view class="one-icon"><u-icon :name="topIconName" color="#ffffff" size="44"></u-icon></view>
				</view>
			</view>
			<view class="back-top" :style="{ opacity: 1 - opacity, background: '#fff' }" @tap="userClickTopIcon">
				<view class="" :style="{ height }"></view>
				<view class="back-icon-con row ">
					<view class="one-icon" style="background: #FFFFFF;"><u-icon :name="topIconName" color="#333" size="44"></u-icon></view>
					<view class="back-top-title">详情</view>
				</view>
			</view>
			<view class="swiper-con" style="position: relative;">
				<swiper autoplay circular>
					<swiper-item class="swiperItem" v-for="(item, index) in dataInfo.pic" :key="index">
						<view class="swiperImg" @tap="userSeeBig"><image :src="item" class="swiperImg"></image></view>
					</swiper-item>
				</swiper>
			</view>
			<view class="good-info">
				<view class="item-con">
					<view class="goods-name">{{dataInfo.name}}</view>
					<view class="row between" style="margin-top: 20upx;">
						<view class="goods-price">
							积分所需
							<text style="font-weight: bold;">{{dataInfo.price}}</text>
						</view>
						<view class="goods-sku">库存{{dataInfo.stock}}</view>
					</view>
				</view>
				<view class="line" style="height: 16upx;background: #F6F6F6;">
					
				</view>
				<view class="item-con">
					<view class="column center"><image src="/static/img/shangpinxiangqing.png" mode="" class="img"></image></view>
					<view style="padding: 20upx 0;"><jyf-parser :html="dataInfo.detail"></jyf-parser></view>
				</view>
			</view>
			<view class="footer-btn row center">
				<view class="f-btn" @tap="buttonClick">
					立即兑换
				</view>
			</view>
		</view>
		<mix-loading v-if="isLoading"></mix-loading>
	</view>
</template>

<script>
import jyfParser from '@/components/jyf-parser/jyf-parser.vue';
export default {
	components: {
		jyfParser
	},
	data() {
		return {
			id: '',
			opacity: 1,
			dataInfo: {},
			height: uni.getSystemInfoSync().statusBarHeight + 'px',
			topIconName: 'nav-back'
		};
	},
	computed: {
		hasProvice() {
			const pages = getCurrentPages();
			let flag = true;
			if (pages.length == 1) {
				flag = false;
				this.topIconName = 'home';
			}
			return flag;
		}
	},
	onLoad(options) {
		this.id = options.id;
		this.loadData();
	},
	onPageScroll(e) {
		if (e.scrollTop < 150) {
			this.opacity = 1 - e.scrollTop / 150;
		} else {
			this.opacity = 0;
		}
	},
	onShareAppMessage() {
		return {
			path: `/pages/details/goodDetails?id=${this.dataInfo.id}&inviteId=${uni.getStorageSync('uid')}`
		};
	},
	methods: {
		userSeeBig(index) {
			let array = this.dataInfo.pic;
			uni.previewImage({
				current: array[index],
				urls: array
			});
		},
		async loadData() {
			const data = {
				id: this.id,
				uid: uni.getStorageSync('uid')
			};
			const res = await this.$request('integral/detail', data,{showLoading:true});
			if (res.result == 0) {
				// res.data.pic = res.data.pic.split('|');
				this.dataInfo = res.data;
			} else {
				this.$util.msg(res.resultNote);
			}
		},
		buttonClick(e) {
			if (!uni.getStorageSync('uid')) {
				this.navTo('/pages/public/author');
				return;
			}
			if(this.dataInfo.stock<=0){
				this.$util.msg('该商品已兑完!下次早点来哦~');
				return
			}
			let array = new Array();
			this.dataInfo.icon=this.dataInfo.pic[0];
			this.$set(array, 0, this.dataInfo);
			getApp().globalData.pointArray = array;
			this.navTo('/pages/point/creatorder');
		}
	}
};
</script>

<style scoped lang="scss">
.one-icon {
	// width: 66upx;
	// height: 66upx;
	background: rgba(94, 94, 94, 1);
	border-radius: 50%;
	padding: 10upx;
}
.back-top {
	position: fixed;
	top: 0;
	z-index: 99999;
	left: 0;
	width: 100%;
	transition: all 0.6s;
}
.back-icon-con {
	height: 44px;
	padding-left: 24upx;
	position: relative;
}
.back-top-title {
	height: 44px;
	line-height: 44px;
	// margin-right: 94px;
	width: 250rpx;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	font-size: 32upx;
	color: #606266;
}
swiper,
.swiperItem,
.swiperImg {
	width: 750upx;
	height: 750upx;
}
.swiper-num {
	position: absolute;
	right: 0;
	bottom: 160upx;
	width: 122upx;
	height: 42upx;
	text-align: center;
	line-height: 42upx;
	background: #000000;
	opacity: 0.6;
	border-radius: 21upx 0px 0px 21upx;
	font-size: 26upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #ffffff;
}
.good-info {
	// margin-top: -100upx;
	padding-bottom: 80px;
	background: #ffffff;
	width: 100%;
}
.item-con {
	padding: 30upx 20upx;
}
.goods-name {
	font-size: 36upx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #000000;
	line-height: 40upx;
}
.goods-price {
	font-size: 24upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #f92e16;
	line-height: 40upx;
}
.goods-sku {
	font-size: 26upx;
	color: #999999;
	line-height: 40upx;
}
.img{
	width:427upx;
	height:43upx;
}
.footer-btn{
	position: fixed;
	bottom: 0;
	height: 120upx;
	width: 100%;
}
.f-btn{
	width: 706upx;
	height: 88upx;
	line-height: 88upx;
	text-align: center;
	background: #6AAE59;
	border-radius: 44px;
	font-size: 30upx;
	color: #FFFFFF;
}
</style>
